<template>
  <div>
    <div class="search">
      <span class="icon bi bi-search"></span>
      <router-link to="/ClassifySearch"><input type="text" placeholder="搜索商品信息"></router-link>
    </div>
    <wait v-if="!iswait"></wait>
    <my-classify v-if="iswait"></my-classify>
  </div>
</template>
<style lang="less" scoped>
@import "../../assets/font/bootstrap-icons.css";
.search{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: white;
  height: 50px;
  padding: 10px 20px;
  box-sizing: border-box;
  input{
    display: block;
    height: 100%;
    width: 100%;
    outline: none;
    border: 0;
    background-color: #eee;
    border-radius: 15px;
    padding-left: 35px;
  }
  span{
    position: absolute;
    font-size: 16px;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
<script>
import myClassify from "@/components/myclassify";
import wait from "@/components/wait";
import { get } from "@/utils/http";
import { mapState } from "vuex"
export default {
  data() {
    return {
      iswait : false,
    };
  },
  computed:{
     ...mapState(['classify'])
  },
  methods: {
    init() {
      get("/api/category").then((response) => {
        let res = response.data;
        if (res.status == 200) {
          let data = res.data;
          this.$store.dispatch("classify/setClassifyAsync", data);
          // console.log(data);
          this.iswait = true;
        }
      });
    },
  },
  created() {
    this.init();
  },
  components: {
    myClassify,
    wait,
  },
};
</script>